<template>
  <el-menu :style="{ width: !isCollapse ? '250px' : '90px' }" default-active="activeIndex" class="aside-container"
    :collapse="isCollapse" @open="handleOpen" @close="handleClose">
    <div class="logo">
      <img :src="isCollapse ? '/logo1.png' : '/logo.png'" alt="logo" class="logo-img" />
    </div>
    <TreeMenu :index="1" :menuData="menuData" />
    <div style="margin-left: 20px; cursor: pointer;" @click="toggleCollapse">
      <el-icon :size="5">
        <el-button round :icon="isCollapse ? DArrowRight : DArrowLeft">{{ isCollapse ? '展开' : '收起' }}</el-button>
      </el-icon>
    </div>
  </el-menu>
</template>

<script setup>
import TreeMenu from "../components/treeMenu.vue"
import { useRouter } from 'vue-router'
import { reactive, ref } from "vue"
import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'

const router = useRouter()
const isCollapse = ref(false)
// console.log(router)
const menuData = reactive(router.options.routes[0].children)

// 切换折叠状态
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}
const handleOpen = () => { }
const handleClose = () => { }
</script>

<style lang="less" scoped>
.aside-container {
  height: 100%;

  .logo {
    display: flex;
    align-items: center;

    .logo-img {
      width: 250px;
      height: 50px;
    }
  }

}
</style>